<%--suppress JSJQueryEfficiency --%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          href="../../../js/jquery-easyui-1.9.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="../../../js/jquery-easyui-1.9.5/themes/icon.css">
    <link rel="stylesheet" type="text/css"
          href="../../../js/jquery-easyui-1.9.5/themes/color.css">
    <script type="text/javascript"
            src="../../../js/jquery-easyui-1.9.5/jquery.min.js"></script>
    <script type="text/javascript"
            src="../../../js/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
</head>
<body>
<table id="user_dg" title="人事信息" class="easyui-datagrid" style="width:100%;height:100%"
       url="../userMessage/list"
       toolbar="#user_toolbar"
       rownumbers="true" pagination="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="userNo" style="width: 10%">用户编号</th>
        <th field="name" style="width: 10%">用户姓名账号</th>
        <th field="userSex" style="width: 10%">性别</th>
        <th field="password" style="width: 10%">密码</th>
        <th field="userHireTime" style="width: 15%">雇佣时间</th>
        <th field="salary" style="width: 10%">工资</th>
        <th field="userPhone" style="width: 12%">联系方式</th>
        <th field="userEmail" style="width: 13%">电子邮箱</th>
        <th field="dept" formatter="deptFormatter" style="width: 10%">所属部门</th>
    </tr>
    </thead>
</table>

<div id="user_toolbar">
    <label for="searchNameUserMessage">用户姓名账号:</label>
    <input id="searchNameUserMessage" name="name" type="text" class="easyui-textbox"/>
    <label for="searchDeptUserMessage">部门编号:</label>
    <input id="searchDeptUserMessage" name="dept.deptNo"
           class="easyui-combobox" data-options="valueField:'deptNo',textField:'deptName',
                   url:'../userMessage/deptList'">
    <a id="search" href="javascript:doUserMessageSearch();" class="easyui-linkbutton"
       data-options="iconCls:'icon-search'">Search</a>
    <a id="reset" href="javascript:doUserMessageReset();" class="easyui-linkbutton"
       data-options="iconCls:'icon-redo'">Reset</a>
    <br/>
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
       onclick="newUserMessage()">New User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
       onclick="editUserMessage()">Edit User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
       onclick="destroyUserMessage()">Remove User</a>
</div>

<%--        新增和修改对话框--%>
<div id="user_dlg" class="easyui-dialog" style="width:400px;height:500px;padding:10px 20px"
     closed="true" buttons="#user_dlg-buttons">
    <div class="ftitle" style="text-align: center">User Message</div>
    <br>
    <form id="user_fm" method="post">
        <div class="fitem">
            <label for="name">用户账号&emsp;</label>
            <input id="name" name="name" class="easyui-textbox"
                   data-options="required:true,missingMessage:'name is not null'"
                   prompt="name" style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="userSex">性&emsp;&emsp;别&emsp;</label>
            <input id="userSex" name="userSex" class="easyui-textbox"
                   data-options="required:true,missingMessage:'userSex is not null'"
                   prompt="userSex" style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="password">密&emsp;&emsp;码&emsp;</label>
            <input id="password" name="password" class="easyui-passwordbox"
                   data-options="required:true,missingMessage:'password is not null'"
                   prompt="password" style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="userHireTime">雇佣时间&emsp;</label>
            <input id="userHireTime" name="userHireTime" class="easyui-datetimebox"
                   data-options="required:true,missingMessage:'userHireTime is not null',
                           showSeconds:true,formatter:formatter,parser:parser" style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="salary">工&emsp;&emsp;资&emsp;</label>
            <input id="salary" name="salary" class="easyui-textbox"
                   prompt="salary" style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="userPhone">联系方式&emsp;</label>
            <input id="userPhone" name="userPhone" class="easyui-textbox"
                   prompt="userPhone" style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="userEmail">电子邮箱&emsp;</label>
            <input id="userEmail" name="userEmail" class="easyui-textbox"
                   prompt="userEmail" style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="dept">所属部门&emsp;</label>
            <input id="dept" name="dept.deptNo" class="easyui-combobox"
                   data-options="required:true,missingMessage:'deptNo is not null',
                           valueField:'deptNo',textField:'deptName',url:'../userMessage/deptList'"
                   style="width: 250px">
        </div>
    </form>
</div>

<div id="user_dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok"
       onclick="saveUser()">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="$('#user_dlg').dialog('close')">Cancel</a>
</div>

<script type="text/javascript">
    //框架进阶：1.能使用框架，2.能扩展框架，3.能修改框架，4.能设计框架
    //修改easyUI组件的时间格式-时间格式化器-把时间对象转换为字符串
    function formatter(date) {
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours().toString();
        let minutes = date.getMinutes().toString();
        let seconds = date.getSeconds().toString();
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hour = hour < 10 ? '0' + hour : hour;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
    }

    //时间解析器：把字符串转换为javascript的时间对象
    function parser(s) {
        let t = Date.parse(s);
        if (!isNaN(t)) {
            return new Date(t);
        } else {
            return new Date(s + ":00:00");
        }
    }

    function deptFormatter(value) {
        return value.deptName;
    }

    function doUserMessageSearch() {
        $("#searchNameUserMessage").textbox('setValue', $("#searchNameUserMessage").val().trim());
        //调用datagrid对象的load方法查询数据，并传递查询参数
        $("#user_dg").datagrid("load", {
            "name": $("#searchNameUserMessage").val(),
            "dept.deptNo": $("#searchDeptUserMessage").val()
        });
    }

    function doUserMessageReset() {
        $("#searchNameUserMessage").textbox('setValue', '');
        $("#searchDeptUserMessage").combobox('clear');
        //清空查询参数后，重新加载数据
        $("#user_dg").datagrid("load", {});
    }

    function loadDeptSuccess(value) {
        $('#dept').combobox({
            onLoadSuccess: function (data) {
                if (data) {
                    if (value) {
                        $('#dept').combobox('select', value);
                    } else {
                        $('#dept').combobox('select', data[0].deptNo);
                    }
                }
            }
        });
    }

    function newUserMessage() {
        $('#user_dlg').dialog('open').dialog('setTitle', 'New User');
        $('#user_fm').form('clear');
        url = '../userMessage/add';
        const d = new Date();
        const nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() +
            " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
        $('#userHireTime').datetimebox('setValue', nowDate);
        loadDeptSuccess();
    }

    function editUserMessage() {
        $('#user_fm').form('clear');
        var row = $('#user_dg').datagrid('getSelected');
        if (row) {
            $('#user_dlg').dialog('open').dialog('setTitle', 'Edit User');
            $('#user_fm').form('load', row);
            url = '../userMessage/edit?userNo=' + row.userNo;
            loadDeptSuccess(row.dept.deptNo);
        } else {
            $.messager.show({
                title: 'Error',
                msg: "请选择要修改的用户信息"
            });
        }
    }

    function destroyUserMessage() {
        var row = $('#user_dg').datagrid('getSelected');
        if (row) {
            $.messager.confirm('Confirm', '是否需要删除该用户？', function (r) {
                        if (r){
                            $.post('../userMessage/delete',{userNo:row.userNo},function(result){
                                if (result.success){
                                    $('#user_dg').datagrid('reload');
                                } else {
                                    $.messager.show({
                                        title: 'Error',
                                        msg: result.errorMsg
                                    });
                                }
                            },'json');
                        }
                    });
                } else {
                    $.messager.show({
                        title: 'Error',
                        msg: "请选择要删除的用户信息"
                    });
                }
            }
            function saveUser(){
                $('#user_fm').form('submit',{
                    url: url,
                    onSubmit: function(){
                        // 提交表单前 表单验证
                        return $(this).form('validate');
                    },
                    success: function(result){
                        // 收到服务器响应的json字符串后，调用这里的代码，回调函数当浏览器收到服务器返回的数据后才执行
                        var result = eval('('+result+')');
                        if (!result.success){
                            $.messager.show({
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        } else {
                            $('#user_dlg').dialog('close');		// 新增成功，关闭对话框
                            $('#user_dg').datagrid('reload');	// 新增成功，刷新列表数据
                        }
                    }
                });
            }
        </script>
    </body>
</html>
